<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>07_input的类型表单</title>
    <style>
      /* 通配符 */
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        width: "100%";
        height: 100vh;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        /* 纵向 */
        flex-direction: column;
      }
      .input_text {
        height: 30px;
        width: 200px;
        border-radius: 15px;
        padding-left: 20px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <form action="">
        <input type="text" class="input_text" placeholder="文本类型" />
        <input type="password" class="input_text" placeholder="密码类型" />
        <input type="color" class="input_text" />
        <input type="date" class="input_text" placeholder="日期类型" />
        <input
          type="datetime-local"
          class="input_text"
          placeholder="日期时间类型"
        />
        <div>
          <label for="">鸿蒙开发</label
          ><input type="checkbox" class="input_text" placeholder="复选框类型" />
          <label for="">Web前端开发</label
          ><input type="checkbox" class="input_text" placeholder="复选框类型" />
          <label for="">flutter开发</label
          ><input type="checkbox" class="input_text" placeholder="复选框类型" />
        </div>
        <div>
          <label for="">男</label
          ><input
            type="radio"
            name="sex"
            class="input_text"
            placeholder="单选框类型"
          />
          <label for="">女</label
          ><input
            type="radio"
            name="sex"
            class="input_text"
            placeholder="单选框类型"
          />
        </div>
        <input type="email" placeholder="邮件" class="input_text" />
        <input type="tel" class="input_text" placeholder="手机号" />
        <input type="number" class="input_text" placeholder="数字" />
        <input type="text" placeholder="请输入账号" value="123123" />
        <input type="password" placeholder="请输入密码" />

        <div>
            <!-- label中的for与input中的id绑定这样啊点击名字也会选中 -->
          <label for="man"><input type="radio" name="gender" id="man" />男</label>
          <label for="women"><input type="radio" name="gender" id="women" />女</label>
        </div>
        <div>
          <label for="football"><input type="checkbox" id="football"/>足球</label>
          <label for="basketball"><input type="checkbox" id="basketball"/>篮球</label>
          <label for="badminton"><input type="checkbox" id="badminton"/>羽毛球</label>
        </div>
        <div>
          <button type="submit">提交</button>
          <button type="reset">重置</button>
        </div>
      </form>
    </div>
  </body>
</html>
